<!--
 * @Descripttion: 
 * @LastEditors: xzh
 * @LastEditTime: 2023-11-04 23:05:04
-->
<template>
  <el-card>
    <DileTable ref="dileTableRef">
      <template #preColumn>
        <template
          v-for="column in AbormalDataTypeListUtils.tableColumnMap[
            abormalDataType
          ]"
          :key="column.field"
        >
          <vxe-column
            :min-width="60"
            :width="column.width || ''"
            :title="$t(column.title)"
          >
            <template #default="{ row }">
              <span>{{ formatColmun(row, column) }}</span>
            </template>
          </vxe-column>
        </template>
      </template>
    </DileTable>
  </el-card>
</template>

<script setup lang="ts">
import { ref, reactive, provide } from "vue";
import { propsParam_Inf } from "@/components/dile-table/index.type";
import {
  abnormalDataTypeEnum,
  abnormalManageToolEnum,
} from "@/utils/typings/abnormalManage/index.type";
import { object_Inf } from "@/utils/typings/index.type";
import { dayjs } from "element-plus";
import AbormalDataTypeListUtils from "./utils";
import DileTable from "@/components/dile-table/index.vue";

const emit = defineEmits([]);
const props = defineProps({
  //异常数据类型
  abormalDataType: {
    type: String,
    requited: true,
    default: "",
  },
});
/**
 * @Author: xzh
 * @Descripttion: 表格实例
 * @Param:
 */
let dileTableRef = ref<any>(null);
/**
 * @Author: xzh
 * @Descripttion: 加载列表数据
 * @Param:
 */
let initTableData = async () => {
  let { abormalDataType } = props;
  try {
    Object.assign(propsParam, {
      tableData: [],
      loading: true,
    });
    let { keyWord, pagination } = dileTableRef.value?.getTableParam(),
      { page, rows } = pagination;
    // 获取异常数据类型列表数据源
    let { record: tableData, total } =
      await AbormalDataTypeListUtils.getAbormalDataTypeList(
        abormalDataType as abnormalDataTypeEnum,
        keyWord,
        {
          pageIndex: page,
          pageSize: rows,
        }
      );
    Object.assign(propsParam, {
      tableData,
      tableRecords: total,
    });
  } finally {
    propsParam.loading = false;
  }
};

/**
 * @Author: xzh
 * @Descripttion: 格式化列值
 * @Param:
 * @param {*} row 行
 * @param {*} column 列配置
 */
let formatColmun = (row: object_Inf, column: object_Inf) => {
  let value: string | object_Inf = row,
    { field, formatter } = column;
  field.split(".").forEach((key: string) => (value = value[key]));
  //格式化
  !!formatter && !!value && (value = dayjs(value as any).format(formatter));
  return value;
};

/**
 * @Author: xzh
 * @Descripttion: 表格参数
 * @Param:
 */
let propsParam = reactive<propsParam_Inf>({
  moduleToolCode: abnormalManageToolEnum[props.abormalDataType],
  loading: true,
  tableData: [],
  isPagination: true,
  emitEvents: {
    refreshTable: initTableData,
  },
});
provide("propsParam", propsParam);

defineExpose({
  initTableData,
});
</script>
<style lang="scss" scoped></style>
